<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="../../cdn/vue/vue.global.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>
  <!-- 导入拖拽需要的包 -->
  <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    {{form}}
    <avue-form ref="crud" :option="option" v-model="form">
    </avue-form>
  </div>
</body>
<script>
  let baseUrl = 'https://cli.avuejs.com/api/area'
  var app = Vue.createApp({
    data() {
      return {
        form: {},
        form: {
          province: "120000",
          multipleSelect: []
        },
        option: {
          column: [{
            label: '分组',
            prop: 'selects',
            type: 'select',
            group: true,
            dicData: [{
              label: '热门城市',
              groups: [{
                value: 'Shanghai',
                label: '上海'
              }, {
                value: 'Beijing',
                label: '北京'
              }]
            }, {
              label: '城市名',
              groups: [{
                value: 'Chengdu',
                label: '成都'
              }, {
                value: 'Shenzhen',
                label: '深圳'
              }, {
                value: 'Guangzhou',
                label: '广州'
              }, {
                value: 'Dalian',
                label: '大连'
              }]
            }]
          },
          {
            label: '下拉框',
            prop: 'select3',
            type: 'select',
            virtualize: true,
            dicData: new Array(100).fill({}).map((ele, index) => {
              return {
                label: '选项' + (index + 1),
                value: index + 1
              }
            })
          },
          {
            label: '动态',
            prop: 'text',
            rules: [
              {
                required: true,
                message: '请输入动态',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            control(val, form, callback) {
              if (val == '110000') {
                return {
                  selects: {
                    display: false
                  }
                }
              } else {
                return {
                  selects: {
                    display: true
                  }
                }
              }
            },
            dicUrl: `${baseUrl}/getProvince?city={{key}}`,
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '多选，可创建条目',
            prop: 'multipleSelect',
            type: 'select',
            span: 24,
            drag: true,
            multiple: true,
            filterable: true,
            allowCreate: true,
            defaultFirstOption: true,
            props: {
              label: 'value',
              value: 'value'
            },
            dicData: [
              { value: '新增' },
              { value: '修改' },
              { value: '删除' }
            ]
          }
          ]
        }
      }
    },
    mounted() {

    },
    methods: {
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>